
<template>
  <div class="header-container">
    <div class="header-left flex-box">
        <el-icon class="icon" size="20" @click="store.commit('collapseMenu')"><Fold /></el-icon>
        <ul class='flex-box'>
              <!-- 调试：打印 selectMenu -->
            <!-- <pre>{{ selectMenu }}</pre> -->
            <li v-for="(item,index) in selectMenu" 
                :key="item.path"
                :class="{selected :route.path===item.path}"
                class="tab flex-box">
                <el-icon  size="12" >
                    <component :is="item.icon">
                    </component>
                </el-icon>
                <router-link class="text flex-box" :to="{ path:item.path }">
                    {{item.name}}
                </router-link>
                <el-icon class="close" size="12" @click="closeTab(item,index)"><Close /></el-icon>
            </li>
        </ul>
    </div>
    <div class="header-right ">
        <el-dropdown>
           <div class="el-dropdown-link flex-box">
                <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
                <p class="user-name">admin</p>
           </div>
            <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item>Action 1</el-dropdown-item>
                <el-dropdown-item>Action 2</el-dropdown-item>
                <el-dropdown-item>Action 3</el-dropdown-item>
                <el-dropdown-item disabled>Action 4</el-dropdown-item>
                <el-dropdown-item divided>Action 5</el-dropdown-item>
            </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import {useStore} from 'vuex'
import {computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'//当前


//拿到store的实例，一个对象，其中有一些方法
const store=useStore()
//当前的路由对象//通过它拿到当前的ul路径
const route=useRoute()
const router = useRouter()
const selectMenu = computed(() => store.state.menu.selectMenu)

//点击关闭tag
const closeTab=(item,index)=>{
    store.commit('closeMenu',item)
    //删除非当前页tag
    if(route.path!=item.path){
        return
    }
    //删除当前页
    const selectMenuDate=selectMenu.value
    //如果删除的是最后一项
    if(index===selectMenuDate.length){
        //如果tag只有一个//我们拿到的是他删掉后的数据？？
        if(!selectMenuDate.length){
            router.push('/')//跳转到根路径
        }else{
            router.push({
                path:selectMenuDate[index-1].path//往前跳
            })
        }
    }
    //如果删除中间位置的tag
    else{
        router.push({
            path:selectMenuDate[index].path
        })
    }
}
</script>

  
<style lang='less' scoped>
.flex-box{
    display: flex;
    // align-self: center;
    align-items: center;
    height: 100%;
}
.header-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    background: #fff;
    padding-right: 25px;
    .header-left{
        height: 100%;
        display: flex;
        align-items: center;
        .icon{
            width: 45px;
            height: 100%;
        }
        .icon:hover{
            background-color: #f5f5f5;
            cursor:pointer;
        }
        .tab{
            padding: 0 10px;
            height: 100%;
            a{
                margin:  0 5px;
            }
            .close{
                visibility: hidden;
            }
            &.selected{
                i{
                    color: #409eff;
                }
                .text{
                    color:#409eff;
                }
                background-color: #f5f5f5;
            }
        }
        .tab:hover{
        background-color: #f5f5f5;
            .close{
                visibility: inherit;
                cursor:pointer;
                color: #000;
            }
            
        }
    }
    .header-right{
        .user-name{
            margin-left: 10px;
        }
    }
    a{
        height: 100%;
        color: #333;
        font-size: 15px;
    }
}
</style>
